<template >
  <div class="container">
    <van-nav-bar
      title="安排详情"
      left-text="返回"
      left-arrow
      style="background-image: linear-gradient(135deg, #4CF6FC 7%, #3C7FB2 59%)"
      @click-left="onClickLeft"
    />
     <div class="subjectOne">
       <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">8:00~10:00</van-tag></div>
          <div class="info" v-if="Eight && Eight.length > 0">
            <div v-for="(item,index) in Eight" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
        </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">10:00~12:00</van-tag></div>
          <div class="info" v-if="ten && ten.length > 0">
            <div v-for="(item,index) in ten" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">12:00~14:00</van-tag></div>
          <div class="info" v-if="twelve && twelve.length > 0">
            <div v-for="(item,index) in twelve" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">14:00~16:00</van-tag></div>
          <div class="info" v-if="fourteen && fourteen.length > 0">
            <div v-for="(item,index) in fourteen" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
      <div class="Eight">
          <div class="tag"><van-tag size="medium" type="primary">16:00~18s:00</van-tag></div>
          <div class="info" v-if="sixteen && sixteen.length > 0">
            <div v-for="(item,index) in sixteen" :key="index">
              <span>姓名：</span><van-tag   type="success">{{item.nickname}}</van-tag>
              <span>号码：</span><van-tag   type="success">{{item.number}}</van-tag>
            </div>
          </div>
          <van-empty v-else description="此时间段暂无学员约车" />
      </div>
     </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import chauffeur from "../js/chauffeur";
export default {
  data() {
    return{
      id:this.$route.query.id,
      Eight: [],
      ten: [],
      twelve: [],
      fourteen: [],
      sixteen: [],
      traineeList:[]
    }
  },
  mounted(){
   this.getAllTrainee(),
   this.getNowPractice()
  },
  methods:{
    // 返回上一页
    onClickLeft(){
      this.$router.go(-1)
    },
    // 教练员获取练车表详情
    getNowPractice(){
      chauffeur.findPracticeById(this.id).then(res => {
        if(res.data.code === 0){
          let Eight = res.data.data.Eight.split(',')
          Eight.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.Eight.push(item)
              }
            })
          })
          let ten = res.data.data.ten.split(',')
          ten.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.ten.push(item)
              }
            })
          })
          let twelve = res.data.data.twelve.split(',')
          twelve.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.twelve.push(item)
              }
            })
          })
          let fourteen= res.data.data.fourteen.split(',')
          fourteen.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.fourteen.push(item)
              }
            })
          })
          let sixteen = res.data.data.sixteen.split(',')
          sixteen.map(res => {
            this.traineeList.forEach(item => {
              if (res === item.id){
                this.sixteen.push(item)
              }
            })
          })
        }
      })
    },
    // 获取全部学员信息
    getAllTrainee(){
      chauffeur.getAllTrainee().then(res => {
        if (res.data.code === 0) {
          this.traineeList = res.data.data.list
        }
      })
    },
  }
}
</script>

<style scoped lang="less">
.container{
  .subjectOne{
    position: relative;
    height: 80vh;
    width: 90%;
    margin-left: 5%;
    border-radius: 10px;
    margin-top: 8%;
    background-color: white;
    overflow-y: auto;
    .Eight{
      margin-top: 8%;
      .van-tag{
        width: 100px;
        height: 30px;
        font-size: 1rem;
        text-align: center;
      }
      .info{
        margin-top: 2%;
      }
    }
  }
}
 /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }

  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
</style>